import TinyReact from "./TinyReact";
const root = document.getElementById("root");
// const virtualDOM = (
//   <div className="container">
//     <h1>你好1 Tiny React</h1>
//     <h2 data-test="test">(编码必杀技)</h2>
//     <div>
//       嵌套1 <div>嵌套 1.1</div>
//     </div>
//     <h3>(观察: 这个将会被改变)</h3>
//     {2 == 1 && <div>如果2和1相等渲染当前内容</div>}
//     {2 == 2 && <div>2</div>}
//     <span>这是一段内容</span>
//     <button onClick={() => alert("你好")}>点击我</button>
//     <h3>这个将会被删除</h3>
//     2, 3
//     <input type="text" value="123" />
//   </div>
// )
// const modifyDOM = (
//   <div className="container">
//     <h6>React</h6>
//     {/* <p data-test="test123">(编码必杀技)</p> */}
//     <div>
//       嵌套1 <div>嵌套 1.1</div>
//     </div>
//     <h3>(观察: 这个将会被改变)</h3>
//     {2 == 1 && <div>如果2和1相等渲染当前内容</div>}
//     {2 == 2 && <div>2</div>}
//     <span>这是一段被修改的内容</span>
//     <button onClick={() => alert("你好！！！")}>点击我</button>
//     {/* <h3>这个将会被删除</h3> */}
//     2, 3
//   </div>
// )
// TinyReact.render(virtualDOM, root)
// setTimeout(()=>{
//   TinyReact.render(modifyDOM, root)
// },2000)
// TinyReact.render(virtualDOM, root)
// console.log(virtualDOM)
// function Demo() {
//   return <div>Hello</div>
// }
// function Heart(props) {
//   return <div>
//     {props.title}
//     &hearts;<Demo />
//   </div>
// }
// TinyReact.render(<Heart title="1111" />, root)
class Alert extends TinyReact.Component {
  constructor(props) {
    super(props)
    this.state = {
      title: "Default Title"
    }
    this.handleClick = this.handleClick.bind(this)
  }
  handleClick() {
    this.setState({ title: "Changed Title" })
  }
  componentWillReceiveProps(nextProps) {
    console.log("componentWillReceiveProps")
  }
  componentWillUpdate() {
    console.log("componentWillUpdate")
  }
  componentDidUpdate() {
    console.log("componentDidUpdate")
  }
  render() {
    return (
      <div>
        {this.props.name}
        {this.props.age}
        <div>
          {this.state.title}
          <button onClick={this.handleClick}>改变Title</button>
        </div>
      </div>
    )
  }
}
// TinyReact.render(<Alert name="于可可" age={20}/>, root)
// setTimeout(()=>{
//   TinyReact.render(<Alert name="可可" age={30}/>, root)
//   // TinyReact.render(<Heart title="1111" />, root)
// },2000)


class DemoRef extends TinyReact.Component {
  constructor(props) {
    super(props)
    this.handleClick = this.handleClick.bind(this)
  }
  handleClick() {
    console.log(this.input.value)
    console.log(this.input)
    console.log(this.alert)
  }
  componentDidMount() {
    console.log("componentDidMount")
  }
  componentWillUnmount() {
    console.log("componentWillUnmount")
  }
  render() {
    return (
      <div>
        <input type="text" ref={input => (this.input = input)} />
        <button onClick={this.handleClick}>按钮</button>
        <Alert ref={alert => (this.alert = alert)} name="张三" age={20} />
      </div>
    )
  }
}

// TinyReact.render(<DemoRef />, root)
// class DemoRef extends TinyReact.Component {
//   constructor(props) {
//     super(props)
//     this.handleClick = this.handleClick.bind(this)
//   }
//   handleClick() {
//     // console.log(this.input.value)
//     console.log(this.input)
//     console.log(this.alert)
//   }
//   componentDidMount() {
//     console.log("componentDidMount")
//   }
//   componentWillUnmount() {
//     console.log("componentWillUnmount")
//   }
//   render() {
//     return (
//       <div>
//         <input type="text" ref={input => (this.input = input)} />
//         <button onClick={this.handleClick}>按钮</button>
//         <Alert ref={alert => (this.alert = alert)} name="张三" age={20} />
//       </div>
//     )
//   }
// }
class KeyDemo extends TinyReact.Component {
  constructor(props) {
    super(props)
    this.state = {
      person: [
        {
          id: 1,
          name: "张三"
        },
        {
          id: 2,
          name: "里斯"
        },
        {
          id: 3,
          name: "Jack"
        },
        {
          id: 4,
          name: "may"
        },
      ]
    }
    this.handleClick = this.handleClick.bind(this)
  }
  handleClick(){
   let newState = JSON.parse(JSON.stringify(this.state)) 
  //  newState.person.push(newState.person.shift())
  // newState.person.splice(1,0,{id:100,name:"pp"})'
   newState.person.pop()
   this.setState(newState)
  }
  render (){
    return (
      <div>
        <ul>
          {this.state.person.map(item=>{
           return <li key={item.id}>{item.name} <DemoRef /></li>
          })}
        </ul>
        <button onClick={this.handleClick}>按钮</button>
      </div>
    )
  }
}
TinyReact.render(<KeyDemo />, root)
